import React from 'react'

// 导入axios
// import axios from 'axios'
import { Toast } from 'antd-mobile'
// 导入封装好的 NavHeader 组件
import NavHeader from '../../components/NavHeader'
import HouseItem from '../../components/HouseItem'

import { API } from '../../utils/api'


// 导入BASE_URL
import { BASE_URL } from '../../utils/url'
// 导入样式
// import './index.scss'
import styles from './index.module.css'

// 解决脚手架中全局变量访问的问题
const BMap = window.BMap

// 覆盖物样式
const labelStyle = {
  cursor: 'pointer',
  border: '0px solid rgb(255, 0, 0)',
  padding: '0px',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  color: 'rgb(255, 255, 255)',
  textAlign: 'center'
}

export default class Map extends React.Component {
  state = {
    housesList: [],
    isShowList: false
  }
  componentDidMount() {
    this.initMap()
  }

  // 初始化地图
  initMap() {
    // 获取当前定位城市
    const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))

    // 初始化地图实例
    const map = new BMap.Map('container')

    this.map = map
    // 创建地址解析器实例
    const myGeo = new BMap.Geocoder()
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      label,
      async point => {
        if (point) {
          //  初始化地图
          map.centerAndZoom(point, 11)
          // 添加常用控件
          map.addControl(new BMap.NavigationControl())
          map.addControl(new BMap.ScaleControl())


          this.renderOverlays(value)

        }
      },
      label
    )

    map.addEventListener('movestart', () => {
      if (this.state.isShowList) {
        this.setState({
          isShowList: false
        })
      }
    })
  }

  //获取房源数据
  async renderOverlays(id) {
    try {
      Toast.loading('加载中...', 0, null, false)
      const res = await API.get(
        `/area/map?id=${id}`
      )

      Toast.hide()

      const data = res.data.body
      const { nextZoom, type } = this.getTypeAndZoom()
      data.forEach(item => {
        this.createOverlays(item, nextZoom, type)

      })
    } catch (e) {
      Toast.hide()
    }

  }

  //缩放级别
  getTypeAndZoom() {
    const zoom = this.map.getZoom();
    let nextZoom, type
    if (zoom >= 10 && zoom < 12) {
      type = "circle"
      nextZoom = 13
    } else if (zoom >= 12 && zoom < 14) {
      type = "circle"
      nextZoom = 15
    } else if (zoom >= 14 && zoom < 16) {
      type = "rect"
    }

    return { nextZoom, type }
  }

  //创建覆盖物
  createOverlays(data, nextZoom, type) {

    const {
      coord: { longitude, latitude },
      label: areaName,
      count,
      value
    } = data
    // 创建覆盖物坐标
    const areaPoint = new BMap.Point(longitude, latitude)

    if (type == "circle") {
      this.createCircle(areaPoint, areaName, count, value, nextZoom)
    } else {
      this.createRect(areaPoint, areaName, count, value)

    }
  }


  //创建区，镇
  createCircle(areaPoint, areaName, count, value, nextZoom) {
    const label = new BMap.Label('', {
      position: areaPoint,
      offset: new BMap.Size(-35, -35)
    })

    // 给 label 对象添加一个唯一标识
    label.id = value

    // 设置房源覆盖物内容
    label.setContent(`
            <div class="${styles.bubble}">
              <p class="${styles.name}">${areaName}</p>
              <p>${count}套</p>
            </div>
          `)

    // 设置样式
    label.setStyle(labelStyle)
    label.addEventListener('click', () => {

      this.renderOverlays(value)
      // 放大地图，以当前点击的覆盖物为中心放大地图
      // 第一个参数：坐标
      // 第二个参数：放大级别
      this.map.centerAndZoom(areaPoint, nextZoom)

      // 解决清除覆盖物时，百度地图API的JS文件自身报错的问题
      setTimeout(() => {
        // 清除当前覆盖物信息
        this.map.clearOverlays()
      }, 0)
    })
    this.map.addOverlay(label)
  }

  //创建小区覆盖物
  createRect(areaPoint, areaName, count, value) {
    const label = new BMap.Label('', {
      position: areaPoint,
      offset: new BMap.Size(-50, -28)
    })

    // 给 label 对象添加一个唯一标识
    label.id = value

    // 设置房源覆盖物内容
    label.setContent(`
      <div class="${styles.rect}">
        <span class="${styles.housename}">${areaName}</span>
        <span class="${styles.housenum}">${count}套</span>
        <i class="${styles.arrow}"></i>
      </div>
    `)

    // 设置样式
    label.setStyle(labelStyle)
    label.addEventListener('click', (e) => {
      this.getHousesList(value)


      const target = e.changedTouches[0]
      this.map.panBy(
        window.innerWidth / 2 - target.clientX,
        (window.innerHeight - 330) / 2 - target.clientY
      )

    })
    this.map.addOverlay(label)
  }

  //获取小区房源信息
  async getHousesList(id) {
    try {
      Toast.loading('加载中...', 0, null, false)
      const res = await API.get(
        `/houses?cityId=${id}`
      );

      Toast.hide()
      this.setState({
        housesList: res.data.body.list,
        isShowList: true
      })
    } catch (e) {
      Toast.hide()
    }

  }


  renderHousesList() {
    return this.state.housesList.map(item => (
      <HouseItem
      key={item.houseCode}
      src={BASE_URL + item.houseImg}
      title={item.title}
      desc={item.desc}
      tags={item.tags}
      price={item.price}
    />
    )
    )
  }
  render() {
    return (
      <div className={styles.map}>
        {/* 顶部导航栏组件 */}
        <NavHeader>地图找房</NavHeader>
        {/* 地图容器元素 */}
        <div id="container" className={styles.container} />

        {/* 房源列表 */}
        {/* 添加 styles.show 展示房屋列表 */}
        <div
          className={[
            styles.houseList,
            this.state.isShowList ? styles.show : ''
          ].join(' ')}
        >
          <div className={styles.titleWrap}>
            <h1 className={styles.listTitle}>房屋列表</h1>
            <div className={styles.titleMore} to="/home/list">
              更多房源
            </div>
          </div>

          <div className={styles.houseItems}>
            {/* 房屋结构 */}
            {this.renderHousesList()}
          </div>
        </div>
      </div>
    )
  }
}
